
// line separator; resourse
.or-spacer {
  margin-top:42px; margin-left:50px; margin-right:50px;
  z-index: 10;
  
  .mask { 
    overflow:hidden; height:20px; 
    &:after {
      position: relative; //addedd
      z-index: 15; //addedd
      content:''; 
      display:block; margin:-25px auto 0;
      width:100%; height:25px;  
      border-radius:125px / 12px;  
      box-shadow:0 0 8px black;
      
    }
  }
  span {
    position: relative; //addedd
    z-index: 20; //addedd
    @size:42px;
    width:@size; height:@size; 
    position:absolute; 
    top: 186px; margin-bottom:-@size/2;
    left:50%; margin-left:-@size/2;
    border-radius:100%;
    box-shadow:0 2px 4px #999;
    background:white;
    
  }
  span i {
    @offset:4px;
    position:absolute;
    top:@offset; bottom:@offset;
    left:@offset; right:@offset;
    border-radius:100%;
    border:1px dashed #aaa;
    
    text-align:center;
    line-height:35px;
    font-style:normal; 
    color: rgb(205, 80, 10);
  }
}



// vertical variation

.or-spacer-vertical {
  display:inline-block;
  margin-top:100px; margin-left:100px; width:100px; 
  position:relative; 
  
  .mask { 
    overflow:hidden; width:20px; height:200px; 
    //outline:1px solid pink;
  }
  &.left .mask:after { 
    content:''; 
    display:block; margin-left:-20px;
    width:20px; height:100%;  
    border-radius:12px / 125px;  
    box-shadow:0 0 8px black;
  }
  &.right .mask:before { 
    content:''; 
    display:block; margin-left:20px;
    width:20px; height:100%; 
    border-radius:12px / 125px; 
    box-shadow:0 0 8px black;
  }
}

.stitcher{    
    border: 2px dashed #5383AF;
    border-radius: 20px;
    box-shadow: 0 0 0 10px #f4f4f4, 3px 5px 4px 6px rgba(11, 77, 121, 1);
}


.table-styles{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.5em;
    color: #0B5C9C;
}